<template>
  <div>
    <div class="title center">{{ $t('messages.map.title') }}</div>
    <div class="mapBox">
      <div class="mapBack">
        <div class="iconAll" @click="RefreshRightFn">
          <el-icon :size="30" :class="RefreshRightShow ? 'is-loading iconBox' : 'iconBox'">
            <RefreshRight />
          </el-icon>
        </div>
        <!-- <img src="../../../assets/image/map/ditu.png" alt="" srcset="" /> -->
        <div ref="chartDom" class="echarts"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { RefreshRight } from '@element-plus/icons-vue'
import { shopCityList, shopCityListWorld, shopCityListType, shopIntroduceType } from '@/http/api/store.js'
import * as echarts from "echarts"
import axios from 'axios'
import chinaJson from '@/assets/map/china.json'
import usaJson from '@/assets/map/usa.json'
import uae from '@/assets/map/uae.json'
import world from '@/assets/map/world.json'
import logo from '@/assets/image/logo.png'
import { ref, reactive, onMounted } from 'vue'
let myChart = reactive({})
let chartDom = ref(null)
var option = reactive({})
let heatmapData = ref([])
let nation = ref('world')
let RefreshRightShow = ref(false)
const getDat = async () => {

  const res = await shopCityListWorld()
  console.log(res, 555)
  for (const key in res) {
    heatmapData.value.push({
      name: key,
      value: res[key]
    })
  }
  initMap()

}
const shopCityListTypeFn = async (data) => {
  if (data.name == '"worde"') {
    getDat()
  } else {
    let city = ''
    if (data.name == 'U.S.A') {
      city = '美国'
    } else if (data.name == 'China') {
      city = '中国'
    } else if (data.name == 'UnitedArabEmirates') {
      city = '迪拜'
    }
    let colorCity = ['Jiangxi province', 'Nevada']
    const res = await shopCityListType({ city })
    heatmapData.value = res.res.map((item) => {
      return {
        name: item.city,
        value: item.number,
        plantData: item.plantData,
        itemStyle: {
          normal: {
            borderWidth: 1, //边际线大小
            borderColor: '#00ffff', //边界线颜色
            areaColor: colorCity.indexOf(item.city) !== -1 ? '#ffdd00' : 'lightskyblue' //默认区域颜色
          },
          emphasis: {
            show: true,
            areaColor: '#ffdd00', //鼠标滑过区域颜色
            label: {
              show: true,
              textStyle: {
                color: '#fff'//鼠标经过字体颜色
              }
            }
          }
        },
      }
    })

  }
  disposeChart()
  initMap()
}
onMounted(() => {
  getDat()


})
const RefreshRightFn = () => {
  RefreshRightShow.value = true
  nation.value = 'world'
  getDat()
  setTimeout(() => {
    RefreshRightShow.value = false
  }, 2000)
}
const initMap = () => {
  myChart = echarts.init(chartDom.value)
  echarts.registerMap('zhongguo', chinaJson)
  echarts.registerMap('USA', usaJson)
  echarts.registerMap('world', world)
  echarts.registerMap('uae', uae)

  option = {
    title: {
    },

    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        if (params.value > 0) {
          if (params.data.plantData) {
            console.log(params.data.plantData)
            return `<div class='formatter' style='width: 270px !important;
            height: 400px;background: black;'>
                      <div style=' width: 270px;height: 114px;'>
                        <img style='width:100%;height: 100%;' src='${params.data.plantData.image}'  alt="" srcset="" />  
                        <div style='font-size: 16px;font-weight: bold;color: #ffdd00;padding: 0 10px;'>
                          <div style='white-space: nowrap;overflow: hidden; text-overflow: ellipsis;text-align: center;' >
                          ${params.data.plantData.title}
                          </div>
                          </div>
                          <div style=' display: flex; justify-content: center;align-content: center;padding: 0 10px;'>
                            <div style=' color: #ffffff;white-space: normal;'>
                            ${params.data.plantData.detils}
                            </div>
                            </div>
                          
                            <div  style=' color: #ffffff;display: flex;justify-content: center;align-items: center;'>
                          ${params.value} Individual
                          </div>
                        </div>
                      
                        </div>`
          } else {
            return `${params.value} Individual`
          }



        } else {
          return 'Nothing'
        }
      }
    },
    // geo: {
    //   aspectScale: 0.85,
    //   zoom: 2, // 初始放大级别
    //   map: nation.value,
    //   layoutCenter: ["50%", "50%"],
    //   layoutSize: "90%",
    //   roam: true, //是否允许缩放
    //   mapLocation: {
    //     "width": "110%",
    //     "height": "97%"
    //   },
    //   label: {
    //     normal: { //静态的时候展示样式
    //       show: true, //是否显示地图省份得名称
    //       textStyle: {
    //         color: '#ffffff',
    //         fontSize: 12
    //       }
    //     },
    //     emphasis: { //动态展示的样式
    //       color: '#ffffff',
    //     },
    //   },
    //   //默认颜色
    //   itemStyle: {
    //     normal: {
    //       borderWidth: 1, //边际线大小
    //       borderColor: '#00ffff', //边界线颜色
    //       areaColor: 'lightskyblue' //默认区域颜色
    //     },
    //     emphasis: {
    //       show: true,
    //       areaColor: '#ffdd00', //鼠标滑过区域颜色
    //       label: {
    //         show: true,
    //         textStyle: {
    //           color: '#fff'//鼠标经过字体颜色
    //         }
    //       }
    //     }
    //   },
    //   data: heatmapData.value,
    //   //对不同的区块进行着色
    //   regions: [{
    //     name: "Jiangxi province",
    //     itemStyle: {
    //       normal: {
    //         areaColor: "#ffdd00",
    //       },
    //       emphasis: {
    //         areaColor: "#ffdd00",
    //       },
    //     },
    //   }, {
    //     name: "Nevada",
    //     itemStyle: {
    //       normal: {
    //         areaColor: "#ffdd00",
    //       },
    //       emphasis: {
    //         areaColor: "#ffdd00",
    //       },
    //     },
    //   }],
    // },
    series: [
      {
        name: '门店数量',
        type: 'map',
        map: nation.value,
        // coordinateSystem: "geo",
        roam: true,//是否开启鼠标缩放和平移漫游
        selectedMode: "single",
        aspectScale: 0.85,
        zoom: 1, // 初始放大级别
        label: {
          show: true,
          color: '#ffffff',
          fontSize: 14
        },
        itemStyle: {
          normal: {
            borderWidth: 1, //边际线大小
            borderColor: '#00ffff', //边界线颜色
            areaColor: 'lightskyblue' //默认区域颜色
          },
          emphasis: {
            show: true,
            areaColor: '#ffdd00', //鼠标滑过区域颜色
            label: {
              show: true,
              textStyle: {
                color: '#fff'//鼠标经过字体颜色
              }
            }
          }
        },

        data: heatmapData.value,
        // 自定义名称映射
      }
    ],
  }

  option && myChart.setOption(option)
  myChart.on('click', function (params) {
    console.log(params, 555)
    if (params.name == 'U.S.A') {
      nation.value = 'USA'
      shopCityListTypeFn(params)
    } else if (params.name == 'China') {
      nation.value = 'zhongguo'
      shopCityListTypeFn(params)
    } else if (params.name == 'UnitedArabEmirates') {
      nation.value = 'uae'
      shopCityListTypeFn(params)
    }


  })
}
const fontSize = (res) => {
  const clientWidth =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth
  if (!clientWidth) return
  const fontSize = 40 * (clientWidth / 1920)
  return res * fontSize
}
// 销毁图表。
const disposeChart = () => {
  if (myChart) {
    myChart.dispose(chartDom.value)
    myChart = null
  }
}
</script>

<style lang="scss" scoped>
::v-deep.formatter {
  width: 200px !important;
  height: 200px;
  background: black;
}

.mapBox {
  width: 100%;
  padding: 50px 100px;
}
.mapBack {
  height: 680px;
  width: 100%;
  border-radius: 30px;
  // background-image: url('../../../assets/image/map/hai.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
  background: #121617;
  .echarts {
    width: 100%;
    height: 100%;
  }
}

.iconBox {
  color: white;
}
.iconAll {
  width: 80px;
  height: 80px;
  cursor: pointer;
  position: relative;
  left: 95%;
  top: 20px;
  display: flex;
  align-content: center;
  justify-content: center;
}
</style>